import React, {Component} from 'react'
import {
    Text,
    View,
    StyleSheet,
    Button,
    Image,
    FlatList,
    ScrollView,
    StyleProp,
    ViewStyle,
    TouchableOpacity
} from 'react-native'
import _ from 'lodash'
import {default as styles, HUNDRED_PERCENT, margin, padding, rectWithSize, screenWidth} from "../../../style/index";
import CertBtn from "../../widget/CertBtn";
import {Actions} from "react-native-router-flux";
import {getAssetUrl, keyExtractor} from "../../../util";
import {inject, observer} from "mobx-react/custom";
import {ProductStore} from "../../../store/modules/main/product";
import {Store} from "../../../store";
import {ProductModelInterface} from "../../../net/instance/CommenModelInstance";
import FastImageCustom from "../../widget/FastImageCustom";
import CommonFlatList from "../../common/CommonFlatList";
import {ProductDetailActionProps} from "../../../page/primary/productDetail";
import FastImage from "react-native-fast-image";


interface ProductListViewProps extends Store {
    contentContainerStyle?: StyleProp<ViewStyle>,
    listStyle?: StyleProp<ViewStyle>,
    refresh: any,
    loadMore: any,
    products: ProductModelInterface[],
    count: number

}

interface ProductListViewState {
}


export default class ProductListView extends Component<ProductListViewProps, ProductListViewState> {

    commonFlatList: CommonFlatList;

    refreshComplete(showLoadMore: boolean) {
        this.commonFlatList.refreshComplete(showLoadMore);
    }

    loadMoreComplete(showLoadMore: boolean) {
        this.commonFlatList.loadMoreComplete(showLoadMore);
    }

    constructor(props) {
        super(props);
    }


    goProductDetail = (id: number) => {
        return () => {
            const props: ProductDetailActionProps = {id};
            Actions.push("ProductDetail", props);
        }
    };

    _renderCell(products: Array<ProductModelInterface>) {
        return products.map(({imageUrl, name, infoImageUrl,price, id}, index) => {
            return (
                    <TouchableOpacity onPress={this.goProductDetail(id)} activeOpacity={.85} key={id} style={[{
                        marginRight: index === 0 ? 10 : 0,
                        marginBottom: 9,
                        width:screenWidth/2 -16,
                        borderRadius: 5,
                        backgroundColor: "#fff",
                    }, styles.centerH, padding(9, 12)]}>
                        <FastImageCustom source={{uri: getAssetUrl(infoImageUrl)}}
                                         resizeMode={FastImage.resizeMode.contain}
                                         style={{width: HUNDRED_PERCENT, height: 150}}/>
                        <Text style={{marginTop: 14, color: "#333333", fontSize: 14}}>{name}</Text>
                        <View
                            style={[{
                                marginTop: 7,
                                width: HUNDRED_PERCENT
                            }, styles.flexDirectionRowNotFlex, styles.justifyBetween, styles.centerH]}>
                            <Text style={{fontSize: 14, color: "#F85824"}}>￥{price}</Text>
                            <CertBtn onPress={this.goProductDetail(id)}/>
                        </View>
                </TouchableOpacity>
            )
        })
    }

    _renderItem = ({item, index}) => {
        let extraStyle:ViewStyle = {};
        if(item.length === 1){
            extraStyle = {justifyContent:"flex-start"}
        }
        return <View key={index}
                     style={[ProductListViewStyles.productRow,extraStyle]}>{this._renderCell(item)}</View>;
    };


    render() {

        const {products, refresh, loadMore} = this.props;
        const chunkProducts: Array<Array<ProductModelInterface>> = _.chunk(products, 2);
        const {contentContainerStyle, listStyle} = this.props;
        let listHeight = chunkProducts.length > 1 ? 260*chunkProducts.length : 300;
        return (
            <CommonFlatList showsVerticalScrollIndicator={false}
                            data={chunkProducts}
                            refresh={refresh}
                            loadMore={loadMore}
                            renderItem={this._renderItem}
                            ref={commonFlatList => this.commonFlatList = commonFlatList}
                            keyExtractor={keyExtractor}
                            contentContainerStyle={contentContainerStyle}
                            style={[{height: listHeight}, listStyle]}>
            </CommonFlatList>
        )
    }
}


const ProductListViewStyles = StyleSheet.create({
    container: {},
    productRow: {
        flexDirection: "row",
        paddingHorizontal: 13,
        width: HUNDRED_PERCENT,
        justifyContent:"center"
    }
});
